<template>
  <!-- 友链管理组件 -->
  <div class="mangerlink">
    <el-table :data="linkInfo" style="width: 100%">
      <el-table-column label="友链名称" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="首页地址" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.home"></el-input>
        </template>
      </el-table-column>
      
      <el-table-column label="图片地址" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.logo"></el-input>
        </template>
      </el-table-column>
      
      <el-table-column label="友链描述" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.describe"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button  type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
     </el-table>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
export default {
  name:"MangerLink",
  components:{

  },
    data() {
      return {
        linkInfo: [],
      }
    },
    computed:{
      ...mapState(["addLink"]),
    },
    watch:{
      // 监听vuex中addLink数据的变化
      addLink(){
        this.getLinkData(); // 重新获取所有友链数据
      }
    },
    methods: {
      // 修改友链
      async handleEdit(item) {
          let {data} =  await this.$axios({
            method:"POST",
            url:"administer/link/update",
            data:{
              _id:item._id,
              name:item.name,
              home:item.home,
              logo:item.logo,
              describe:item.describe,
            }
          });
          // console.log(data);
          // this.linkInfo = data.data;
          this.$message.success(data.message);
      },
      // 删除友链
      async handleDelete() {
          let {data} =  await this.$axios({
            method:"delete",
            url:"administer/link/delete",
            data:{_id:item._id,}
          });
          if(data.code) return this.$message.error(data.message);
          this.$message.success(daat.message);
          // console.log(data);
          this.getLinkData();
      },

      async getLinkData(){
       let {data} =  await this.$axios({
            method:"GET",
            url:"getData/link",
          });
          // console.log(data);
          this.linkInfo = data.data;
      },
    },
    created(){
      this.getLinkData();
    }
}
</script>

<style lang="less" scoped>
.el-input{
  width: 180px;
}
</style>